<?php
require_once 'layout.php';

$title = "帮助中心";
$currentPage = "help";

$content = '
<section class="hero" style="padding: 60px 0;">
    <div class="container">
        <div class="hero-content">
            <h1>帮助中心</h1>
            <p>SSL证书安装指导、API文档、常见问题解答，帮助您快速使用我们的服务</p>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="help-categories" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 60px;">
            <div class="help-category" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center;">
                <div style="width: 60px; height: 60px; background: var(--primary-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
                    <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
                        <rect x="5" y="8" width="20" height="14" rx="2" fill="none" stroke="white" stroke-width="2"/>
                        <path d="M25 12l-5-5-5 5" stroke="white" stroke-width="2" fill="none"/>
                        <path d="M5 12l5-5 5 5" stroke="white" stroke-width="2" fill="none"/>
                    </svg>
                </div>
                <h3>安装指导</h3>
                <p style="color: var(--text-light); margin: 15px 0;">详细的SSL证书安装教程</p>
                <a href="#installation-guide" class="btn btn-outline">查看教程</a>
            </div>
            
            <div class="help-category" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center;">
                <div style="width: 60px; height: 60px; background: var(--accent-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
                    <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
                        <rect width="24" height="18" x="3" y="6" rx="2" fill="none" stroke="white" stroke-width="2"/>
                        <path d="M7 10l5 3 5-3" stroke="white" stroke-width="2" fill="none"/>
                    </svg>
                </div>
                <h3>API文档</h3>
                <p style="color: var(--text-light); margin: 15px 0;">完整的 API 接口文档</p>
                <a href="#api-docs" class="btn btn-outline">查看文档</a>
            </div>
            
            <div class="help-category" style="background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center;">
                <div style="width: 60px; height: 60px; background: #f59e0b; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
                    <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="15" cy="12" r="3" fill="white"/>
                        <path d="M15 1v6m0 8v6m8-8h-6m-8 0H3" stroke="white" stroke-width="2"/>
                    </svg>
                </div>
                <h3>常见问题</h3>
                <p style="color: var(--text-light); margin: 15px 0;">用户最关心的问题和详细解答</p>
                <a href="#faq" class="btn btn-outline">查看FAQ</a>
            </div>
        </div>

        <!-- 常见问题 -->
        <div id="faq" class="help-section" style="margin-top: 80px;">
            <h2>常见问题解答</h2>
            <div class="faq-list" style="margin-top: 30px;">
                <div class="faq-item" style="background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 15px;">
                    <h4 style="color: var(--primary-blue); margin-bottom: 10px; cursor: pointer;" onclick="toggleFaq(this)">
                        <span style="margin-right: 10px;">+</span>什么是SSL证书？
                    </h4>
                    <div class="faq-answer" style="display: none; color: var(--text-light); margin-top: 15px;">
                        SSL证书是数字证书的一种，遵循SSL协议，由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能。
                    </div>
                </div>
                
                <div class="faq-item" style="background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 15px;">
                    <h4 style="color: var(--primary-blue); margin-bottom: 10px; cursor: pointer;" onclick="toggleFaq(this)">
                        <span style="margin-right: 10px;">+</span>DV、OV、EV证书有什么区别？
                    </h4>
                    <div class="faq-answer" style="display: none; color: var(--text-light); margin-top: 15px;">
                        <p><strong>DV域名验证：</strong>只验证域名所有权，签发最快，适合个人网站。</p>
                        <p><strong>OV组织验证：</strong>验证企业信息，安全性更高，适合企业网站。</p>
                        <p><strong>EV扩展验证：</strong>最高级别验证，显示绿色地址栏，适合电商平台。</p>
                    </div>
                </div>
                
                <div class="faq-item" style="background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 15px;">
                    <h4 style="color: var(--primary-blue); margin-bottom: 10px; cursor: pointer;" onclick="toggleFaq(this)">
                        <span style="margin-right: 10px;">+</span>如何验证SSL证书是否安装成功？
                    </h4>
                    <div class="faq-answer" style="display: none; color: var(--text-light); margin-top: 15px;">
                        <p>1. 浏览器地址栏显示锁形图标</p>
                        <p>2. 使用在线SSL检测工具 <a href="https://myssl.com" target="_blank">myssl.com</a></p>
                        <p>3. 命令行检测：openssl s_client -connect domain.com:443</p>
                    </div>
                </div>
                
                <div class="faq-item" style="background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 15px;">
                    <h4 style="color: var(--primary-blue); margin-bottom: 10px; cursor: pointer;" onclick="toggleFaq(this)">
                        <span style="margin-right: 10px;">+</span>证书到期后会怎么样？
                    </h4>
                    <div class="faq-answer" style="display: none; color: var(--text-light); margin-top: 15px;">
                        证书到期后，浏览器会显示安全警告，用户无法正常访问网站。建议在到期前30天进行续期，使用ACME自动化可以避免这个问题。
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.tab-btn:hover {
    background: var(--hover-gray) !important;
}

.tab-btn.active {
    background: var(--primary-blue) !important;
    color: white !important;
}

code {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 14px;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.endpoint-card:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .help-categories {
        grid-template-columns: 1fr !important;
    }
    
    .tab-buttons {
        flex-direction: column;
    }
    
    .tab-btn {
        width: 100%;
        margin-bottom: 5px;
    }
    
    pre {
        font-size: 12px;
    }
}
</style>

<script>
function showTab(tabName) {
    // 隐藏所有标签内容
    const tabs = document.querySelectorAll(".tab-content");
    tabs.forEach(tab => tab.style.display = "none");
    
    // 重置所有按钮样式
    const buttons = document.querySelectorAll(".tab-btn");
    buttons.forEach(btn => {
        btn.style.background = "white";
        btn.style.color = "var(--text-dark)";
        btn.classList.remove("active");
    });
    
    // 显示选中的标签
    document.getElementById(tabName).style.display = "block";
    
    // 高亮选中的按钮
    event.target.style.background = "var(--primary-blue)";
    event.target.style.color = "white";
    event.target.classList.add("active");
}

function toggleFaq(element) {
    const answer = element.nextElementSibling;
    const icon = element.querySelector("span");
    
    if (answer.style.display === "none" || !answer.style.display) {
        answer.style.display = "block";
        icon.textContent = "-";
    } else {
        answer.style.display = "none";
        icon.textContent = "+";
    }
}
</script>
';

renderPage($title, $content, $currentPage);
?>